<!--
 * @Description: DDivider 分割线
 * @Author: zhangwei
 * @Date: 2023-02-02 16:25:48
 * @LastEditTime: 2023-02-20 17:59:24
 * @LastEditors: zhangwei
-->
<template>
  <div v-if="mdata.attrs.direction === 'horizontal'">
    <div
      :style="{
      width: mdata.style.width + 'px',
      height: mdata.style.height + 'px',
      backgroundColor: mdata.style.backgroundColorValue,
      margin:`${mdata.style.padding![0]}px ${mdata.style.padding![1]}px ${mdata.style.padding![2]}px ${mdata.style.padding![3]}px`,
    }"
    ></div>
  </div>
  <div v-if="mdata.attrs.direction === 'vertical'">
    <div
      :style="{
      width: mdata.style.height + 'px',
      height: mdata.style.width + 'px',
      backgroundColor: mdata.style.backgroundColorValue,
      margin:`${mdata.style.padding![0]}px ${mdata.style.padding![1]}px ${mdata.style.padding![2]}px ${mdata.style.padding![3]}px`,
    }"
    ></div>
  </div>
</template>

<script lang="ts" setup name="DImage">
import type { PropType } from "vue";
import type { TypeWidget } from "@/types/TypeDesign";
import { onMounted, ref } from "vue";
import { useWidget } from "@/hooks/lowcode/useWidget";

var props = defineProps({
  mdata: {
    type: Object as PropType<TypeWidget>,
    default: () => {},
  },
});

let { getWidgetStyle } = useWidget(props.mdata);

onMounted(() => {});
</script>

<style scoped lang="scss"></style>
